 import React from 'react'
 import './AddAD.css'
 import { Input, Button, Select, DatePicker, Space, Upload, Modal, Radio,message } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import axios from '../../../utils/http'
 import {UPDATEADVERT,ADDADPHOTOS} from '../../../utils/api'
 const { RangePicker } = DatePicker;
 
 const { Option } = Select;
 
 
 
 
 
 
 class ModifyAD extends React.Component {
     constructor() {
         super()
         this.state = {
             // 图片上传
             previewVisible: false,
             previewImage: '',
             previewTitle: '',
             fileList: [
                //  {
                //      uid: '-1',
                //      name: 'image.png',
                //      status: 'done',
                //      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                //  },
                //  {
                //      uid: '-2',
                //      name: 'image.png',
                //      status: 'done',
                //      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                //  },
                //  {
                //      uid: '-3',
                //      name: 'image.png',
                //      status: 'done',
                //      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                //  },
                //  {
                //      uid: '-4',
                //      name: 'image.png',
                //      status: 'done',
                //      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                //  },
                //  {
                //      uid: '-xxx',
                //      percent: 50,
                //      name: 'image.png',
                //      status: 'uploading',
                //      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                //  },
                //  {
                //      uid: '-5',
                //      name: 'image.png',
                //      status: 'error',
                //  },
             ],
            //  单选框
             data:{},
 
         };
     }
      // 生命周期
      componentWillMount(){
          console.log(this.props.location.query.name);
          this.setState({
              data:{...this.props.location.query.name},
          })
        //   console.log(this.state.data);
      } 
 
     
    
     //广告图片
     getBase64 = (file) => {
         return new Promise((resolve, reject) => {
             const reader = new FileReader();
             reader.readAsDataURL(file);
             reader.onload = () => resolve(reader.result);
             reader.onerror = error => reject(error);
         });
     }
 
     handleCancel = () => this.setState({ previewVisible: false });
 
     handlePreview = async file => {
         if (!file.url && !file.preview) {
             file.preview = await this.getBase64(file.originFileObj);
         }
 
         this.setState({
             previewImage: file.url || file.preview,
             previewVisible: true,
             previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
         });
     };
 
     handleChange = ({ fileList }) => this.setState({ fileList });

    //  修改广告名称
     XgggName=(e)=>{
         console.log(e.target.value);
         let obj = {...this.state.data}
         obj.advertName=e.target.value
         this.setState({
             data:{...obj}
         })
     }
     //  广告位置下拉款
     onChange = (value) => {
        let obj = {...this.state.data}
        obj.advertAdd=value
        this.setState({
            data:{...obj}
        })
    }
     //   时间选择器
     onChangeTime(dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1]);
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        let obj = {...this.state.data}
        obj.advertStart=dateStrings[0]
        obj.advertLast=dateStrings[1]
        this.setState({
            data:{...obj}
        })
    }
      //  修改广告链接
      XgggLink=(e)=>{
        // console.log(e.target.value);
        let obj = {...this.state.data}
        obj.advertUrl=e.target.value
        this.setState({
            data:{...obj}
        })
    }
        //  修改开启状态
        Xgradio=(e)=>{
            // console.log(e.target.value);
            let obj = {...this.state.data}
            obj.advertStatu=e.target.value
            this.setState({
                data:{...obj}
            })
        }
        
    //   提交修改广告
    Xgdata=async()=>{
        console.log(this.state.fileList);
        let formData=new FormData()
        for (let index = 0; index < this.state.fileList.length; index++) {
            formData.append('file',this.state.fileList[index].originFileObj)
        }
        // formData.append('file',this.state.fileList[0].originFileObj)
        await axios({
            url:ADDADPHOTOS,
            method:'post',
            data:formData
        }).then(data=>{
            console.log(data);
            let obj = {...this.state.data}
            obj.advertUrl=data.data.data[0]
            this.setState({
                data:{...obj}
            })
        })     
        console.log(this.state.data);  
        await axios({
            url:UPDATEADVERT,
            method:'post',
            data:this.state.data
        }).then(data=>{
               console.log(data); 
               if(data.data.code===200){
                message.success('修改成功', 3);
                this.props.history.push("/Home/wangZhan/AdvertisingList/AdvertisingListTabel");
              }else{
                message.error('修改失败',3);
              }
        })
    }
 
     render() {
         //  广告图片
         const { previewVisible, previewImage, fileList, previewTitle } = this.state;
         const uploadButton = (
             <div>
                 <PlusOutlined />
                 <div style={{ marginTop: 8 }}>Upload</div>
             </div>
         );
 
         return (
             <div className='AddAD'>
                 {/* 我是添加广告 */}
                 <div className='adName'>
                     <span>广告名称：</span>
                     <span><Input placeholder="请输入广告名称"  defaultValue={this.state.data.advertName} onChange={this.XgggName}/></span>
                 </div>
                 <div>
                     <span>广告位置：</span>
                     <span><Select
                         showSearch
                         style={{ width: 200 }}
                         placeholder="Select a person"
                         optionFilterProp="children"
                         onChange={this.onChange}
                         defaultValue={this.state.data.advertAdd}
                         filterOption={(input, option) =>
                             option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                         }
                     >
                        <Option value="首页轮播广告位" >首页轮播广告位</Option>
                        <Option value="热榜顶部广告位">热榜顶部广告位</Option>
                        <Option value="积分商城顶部广告位">积分商城顶部广告位</Option>
                     </Select>,</span>
                 </div>
                 {/* <div>
                     <span>开始日期：</span>
                     <span>
                         <Input placeholder="请输入广告名称" />
                     </span>
                 </div> */}
                 <div>
                     <span>日期选择：</span>
                     <Space direction="vertical" size={12}>
                         <RangePicker
                          defaultValue={[moment(this.state.data.advertStart),moment(this.state.data.advertLast)]}
                             ranges={{
                                 Today: [moment(), moment()],
                                 'This Month': [moment().startOf('month'), moment().endOf('month')],
                             }}
                             onChange={this.onChangeTime}
                         />
                     </Space>
                 </div>
                 <div>
                     <span>广告链接：</span>
                     <span><Input placeholder="请输入广告链接"  defaultValue={this.state.data.link} onChange={this.XgggLink}/></span>
                 </div>
                 <div>
                     <span>广告图片：</span>
                     <Upload
                         action=""
                         beforeUpload={()=> false}
                         listType="picture-card"
                         fileList={fileList}
                         onPreview={this.handlePreview}
                         onChange={this.handleChange}
                     >
                         {fileList.length >= 1 ? null : uploadButton}
                     </Upload>
                     <Modal
                         visible={previewVisible}
                         title={previewTitle}
                         footer={null}
                         onCancel={this.handleCancel}
                     >
                         <img alt="example" style={{ width: '100%' }} src={previewImage} />
                     </Modal>
                 </div>
                 <div>
                     <span>是否开启：</span>
                     <Radio.Group name="radiogroup" defaultValue={this.state.data.advertStatu} onChange={this.Xgradio}>
                         <Radio value={1}>开启</Radio>
                         <Radio value={0}>关闭</Radio>
                     </Radio.Group>
 
 
                 </div>
                 <div>
                     <Button type="primary" onClick={this.Xgdata}>确定</Button>
                 </div>
 
 
             </div>
         )
     }
 
 }
 
 export default ModifyAD






